<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">每日运动量</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<view @tap="value='轻度'" class="row-cell" :class="`${value=='轻度'?'row-yes':'row-no'}`">
						<view v-if="value=='轻度'" class="row-cell-mark d-flex a-center j-center">
							<i class="icon icon-xuanzhong" style="font-size: 34rpx;color: #ffffff;"></i>
						</view>
						<view class="row-cell-title">轻度</view>
						<view class="row-cell-describe">几乎无活动，如办公室职员、学生等</view>
					</view>
					<view @tap="value='中度'" class="row-cell" :class="`${value=='中度'?'row-yes':'row-no'}`">
						<view v-if="value=='中度'" class="row-cell-mark d-flex a-center j-center">
							<i class="icon icon-xuanzhong" style="font-size: 34rpx;color: #ffffff;"></i>
						</view>
						<view class="row-cell-title">中度</view>
						<view class="row-cell-describe">少量活动，如家庭主妇、销售人员等</view>
					</view>
					<view @tap="value='重度'" class="row-cell" :class="`${value=='重度'?'row-yes':'row-no'}`">
						<view v-if="value=='重度'" class="row-cell-mark d-flex a-center j-center">
							<i class="icon icon-xuanzhong" style="font-size: 34rpx;color: #ffffff;"></i>
						</view>
						<view class="row-cell-title">重度</view>
						<view class="row-cell-describe">大量活动，如运动员、建筑工人等</view>
					</view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button _style="margin:0 auto 0 auto;font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

const value = ref('轻度')
const popup = ref()
const showPopup = (initial:string) => {
	popup.value.open("bottom")
	if(initial!=null)value.value = initial;
}
const closePopup = () => {
	popup.value.close()
}
//确定选择并给父页面传值
const emit = defineEmits(["onExercise"])
const determine = () => {
	emit("onExercise", value.value);
	closePopup();//关闭
}
defineExpose({
  showPopup,
  closePopup
});
</script>
<style lang="scss" scoped>

.bottom-popup{
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	.popup-title{
		height: 100rpx;
		.title-text{
			position:absolute;
			top:34rpx;
			left:50rpx;
			height: 32rpx;
			width: 234rpx;
		}
		.title-icon{
			position:absolute;
			top:32rpx;
			right: 30rpx;
			
			width: 36rpx;
			height: 36rpx;
		}
	}
	.popup-show{
		justify-content: space-between;
		height: 80rpx;
		padding: 0 30rpx 0 30rpx;
		.show-text{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.popup-row{
		padding:0 30rpx 47rpx 20rpx;
		.row-yes{
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0,0,0,0.06);
			border: 2rpx solid rgba(29,198,145,0.5);
			color: #1DC691;
		}
		.row-no{
			background: #F5F5F5;
			color: #999999;
		}
		.row-cell{
			position: relative;
			margin-top: 24rpx;
			width: 690rpx;
			height: 160rpx;
			border-radius: 10rpx;
			.row-cell-title{
				padding-top: 25rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
			}
			.row-cell-describe{
				padding-top: 21rpx;
				text-align: center;
				
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
			}
			.row-cell-mark{
				position: absolute;
				top:0;
				left:0;
				width: 40rpx;
				height: 40rpx;
				background: #1DC691;
				border-radius: 8rpx 0 8rpx 0;
			}
		}
	}
}
</style>